<template>
    <div class="scene_root">
        <head-view class="head" />

        <div class="View">
            <!-- tab切换菜单 -->
            <el-tabs
                v-model="activeName"
                @tab-click="handleTabClick"
                class="bh-tab"
            >
                <el-tab-pane
                    :label="$t('message.editRelationPage.tabPfdTitle')"
                    name="pfd"
                >
                </el-tab-pane>
                <!-- <el-tab-pane
                    :label="$t('message.editRelationPage.tab3DCadTitle')"
                    name="3d"
                >
                </el-tab-pane> -->
            </el-tabs>

            <!-- 菜单栏 -->
            <div class="title-view">
                        <!-- 头部下拉菜单-->

                <div class="top-btn-view">
                    <!-- <div class="btn-box">
                        <div
                            v-for="(downItem, index) in activeName == 'pfd'
                                ? topYLBtnDownList
                                : topYLBtnDownList"
                            :key="index"
                        >
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <button
                                        @click="BtnActive(index)"
                                        :class="
                                            index == downBtnActiveX
                                                ? 'tab-btn downBtnActive'
                                                : 'tab-btn'
                                        "
                                    >
                                        {{ downItem.topBtnName }}
                                    </button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                        v-for="(
                                            dropdownItem, dropdownIndex
                                        ) in downItem.downList"
                                        :key="dropdownIndex"
                                        @click.native="
                                            dropDownMenu(
                                                dropdownItem,
                                                downItem.type
                                            )
                                        "
                                    >
                                        <button
                                            :disabled="!dropdownItem.disabled"
                                            class="drop-btn"
                                        >
                                            {{ dropdownItem.itemName }}
                                        </button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div> -->
                    <div class="bottom">
                        <div class="bottom-left-view">
                            <div class="b-input">
                                <div class="b-input-label">
                                    {{
                                        $store.state.threeRelationMacType == 1
                                            ? $t("message.bhView.label.jqName")
                                            : $t("message.bhView.label.pgName")
                                    }}
                                </div>
                                <!-- macName -->
                                <el-input
                                    v-model="showMacNameStr"
                                    clearable
                                    :placeholder="
                                        $t('message.bhView.label.placeholder')
                                    "
                                    class="selectInput"
                                    readonly
                                ></el-input>

                                <!-- 机器名称长name -->
                                <el-input
                                    v-if="
                                        $store.state.threeRelationMacType == 1
                                    "
                                    v-model="$store.state.threeRelationMacNameb"
                                    clearable
                                    :placeholder="
                                        $t('message.bhView.label.placeholder')
                                    "
                                    class="selectInput selectInputlong"
                                    readonly
                                ></el-input>

                               
                            </div>
                            
                        </div>
                        <!-- <button class="bg-bottom-btn" @click="_onEditClick">
                            {{ $t("message.cadViewer.optTypeStr.commonSign") }}
                        </button> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="content-lay">
            <threeDPartRelationView v-if="activeName == '3d'" /> 
            <pfdRelationView v-if="activeName == 'pfd'" />
        </div>
    </div>
</template>

<script>
import HeadForCad from "@/components/header/Head";
import threeDPartRelationView from "@/components/EditRelationPage/3DPartRelationView";
import pfdRelationView from "@/components/EditRelationPage/pfdRelationView";
import eventBus from "@/eventBus/bus";


export default {
    // 注册组件
    components: {
        "head-view": HeadForCad,
        threeDPartRelationView: threeDPartRelationView,
        pfdRelationView: pfdRelationView,
    },

    data() {
        let _self = this;
        return {
            activeName: "pfd",

            downBtnActiveX: null,
            downBtnActive: null,

            // pfd 下拉菜单
            topYLBtnDownList: [
                {
                    topBtnName: this.$t(
                        "message.bhView.topBtnDownList.printing"
                    ),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.print_preview"
                            ),
                            disabled: false,
                        },
                    ],
                },
                {
                    topBtnName: this.$t(
                        "message.bhView.topBtnDownList.reading"
                    ),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu0"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu1"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu2"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu3"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu4"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu5"
                            ),
                            disabled: true,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu6"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.reading.cadView.contextMenu.menu7"
                            ),
                            disabled: true,
                        },
                    ],
                },
                {
                    topBtnName: this.$t("message.bhView.topBtnDownList.data"),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.sort"
                            ),
                            disabled: false,
                        },
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.screen"
                            ),
                            disabled: false,
                        },
                    ],
                },
                {
                    topBtnName: this.$t("message.bhView.topBtnDownList.view"),
                    type: "YL",
                    downList: [
                        {
                            itemName: this.$t(
                                "message.bhView.topBtnDownList.selectDisplayItems"
                            ),
                            disabled: true,
                        },
                    ],
                },
            ],

            showMacNameStr:
                _self.$store.state.threeRelationMacType == 1
                    ? _self.$store.state.threeRelationMacName
                    : _self.$store.state.threeRelationMacNameb,
        };
    },

    computed: {
        toMarkupBtnIsDisable() {
            return false;
        },

        threeRelationMacType() {
            return this.$store.state.threeRelationMacType;
        },

        threeRelationMacName() {
            return this.$store.state.threeRelationMacName;
        },

        threeRelationMacNameb() {
            return this.$store.state.threeRelationMacNameb;
        },
    },

    watch: {
        threeRelationMacType() {
            this.updateThreeRelationMacNameStr();
        },

        threeRelationMacName() {
            this.updateThreeRelationMacNameStr();
        },

        threeRelationMacNameb() {
            this.updateThreeRelationMacNameStr();
        },
    },

    methods: {
        // _onEditClick(){
        //     eventBus.$emit("_go_onEditClick");
        // },
        updateThreeRelationMacNameStr() {
            this.showMacNameStr =
                this.$store.state.threeRelationMacType == 1
                    ? this.$store.state.threeRelationMacName
                    : this.$store.state.threeRelationMacNameb;
        },

        handleTabClick(e) {},

        changeToScene() {},

        /**
         * markup按钮 跳转CADView
         */
        onToMarkClick() {},

        //下拉菜单标记颜色
        BtnActive(index) {
            this.downBtnActive = index;
        },
    },
};
</script>

<style lang="scss" scoped>
.scene_root {
    height: 100%;
    //     display: flex;
    //     flex-direction: column;
    background: #f8f8f8;
}

.View {
    width: 100%;

    // 顶部tab
    .bh-tab {
        width: 100%;
        // height: 100%;
        ::v-deep .el-tabs__header {
            margin: 15px 24px 0 24px;
            width: calc(100% -48px);
        }
        ::v-deep .el-tabs__content {
            height: calc(100% - 55px);
        }
        ::v-deep #pane-first {
            height: 100%;
        }
        ::v-deep #pane-second {
            height: 100%;
        }
        ::v-deep #pane-third {
            height: 100%;
        }
    }

    .title-view {
        width: calc(100% - 48px);
        background: #f8f8f8;
        border-bottom: 1px solid #e1e1e1;
        margin-left: 24px;
        .top-tab {
            display: flex;
            width: 100%;
            height: 55px;
        }

        .top-btn-view {
            height: 48px;
            display: flex;
            align-content: center;
            //     justify-content: space-between;

            .btn-box {
                width: 300px;

                display: flex;
                align-items: center;
                justify-content: flex-start;
            }
            .tab-btn {
                min-width: 60px;
                height: 32px;
                text-align: center;
                line-height: 32px;
                color: rgba(0, 0, 0, 0.65);
                margin-right: 2px;
                border-radius: 2px;
                transition: 0.5s;
            }
            .tab-btn:hover {
                background: rgba(33, 61, 73, 0.05);
            }
            .downBtnActive {
                background: rgba(33, 61, 73, 0.05);
            }
        }
        .bottom {
            width: calc(100% - 256px);
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            //     margin-left: 140px;
            .bottom-left-view {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 40px;
            }
            .bottom-right-view {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                height: 40px;
                button {
                    min-width: 52px;
                    height: 24px;
                    border-radius: 4px;
                    border: 1px solid #d3d3d3;
                    margin-left: 16px;
                }
                .bg-bottom-btn {
                    background: #106ebe;
                    color: #ffffff;
                    padding: 0 8px;
                }
                .edit-btn {
                    color: #fff;
                    background: #bc000f;
                    border: 0 none;
                }
            }
            .b-input {
                display: flex;
                align-items: center;
                height: 100%;
                margin-right: 24px;
                .b-input-label {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.85);
                    height: 24px;
                    line-height: 24px;
                }
                .selectInput {
                    width: 224px;
                    height: 24px;
                }
                .selectInputlong {
                    width: 384px;
                    margin-left: 8px;
                    ::v-deep .el-input__inner {
                        width: 384px;
                    }
                }
                ::v-deep .el-input__inner {
                    width: 224px;
                    height: 24px;
                    color: rgba(0, 0, 0, 0.65);
                    background: #f8f8f8;
                }
                ::v-deep .el-input__icon {
                    line-height: 24px;
                }
            }
            .DViewer {
                margin-left: 8px;
                min-width: 40px;
                height: 24px;
                // border-radius: 4px;
                // border: 1px solid #d9d9d9;
                display: flex;
                align-items: center;
                justify-content: center;
                // cursor: pointer;
                .iconfont {
                    font-size: 24px;
                    margin: 0 4px;
                    color: #2a7190;
                    cursor: pointer;
                }
            }
        }
    }
}

.content-lay {
    width: 100%;
    height: calc(100% - 135px);
    box-sizing: border-box;
    margin: 0 24px;
    padding-bottom: 24px;
}

.bg-bottom-btn {
	background: #106ebe;
	color: #ffffff;
	padding: 1px 8px;
	// margin-right: 60px;
	border-radius: 4px;
}
</style>